<template>
  <scroll-view class="viewport" scroll-y scroll-with-animation :scroll-top="scrollTop" @scroll="handleScroll"
    @scrolltolower="postScroll">
    <!-- 导航栏 -->
    <NavBar :server="reverse"></NavBar>

    <!-- 动态 -->
    <PostList :lists="lists" :fileUrl="fileUrl" :page="page"></PostList>

    <!-- 2个按钮 -->
    <image v-if="gobackflag" src="/static/images/back.png" class="back-to-top-icon" @click="goTop">
    </image>

    <navigator url="/pages/index/meet/components/publish" open-type="navigate" hover-class="navigator-hover"
      class="send">
      <image src="/static/Meet/sendinpage.png" class="button-send" v-if="gobackflag"> </image>
    </navigator>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import NavBar from './components/NavBar.vue'
import PostList from './components/PostList.vue'
import { getBlogItemApi } from '@/services/index/home'
const gobackflag = ref(false)
const scrollTop = ref(0)
const postListFn = ref(null)
// 一键回到顶部
function goTop() {
  scrollTop.value = 1 // 设置一个非零值来触发更新
  setTimeout(() => {
    scrollTop.value = 0 // 然后再设置为0
  }, 10)
}

// 显示按钮
function handleScroll(e: any) {
  if (e.detail.scrollTop > 100) {
    gobackflag.value = true
  } else {
    gobackflag.value = false
  }
}
let lists = ref([])
let fileUrl = ref('')
let page = 1
let reverse = () => {
  lists.value.sort((a, b) => {
    return b.createTime - a.createTime
  })
}
function postScroll() {
  getBlogItemApi(page).then((res) => {
    console.log('page', res.code)
    if (res.code === 500) {
      uni.showToast({
        title: '没有更多了',
        icon: 'none',
        duration: 2000
      })
      return
    }
    lists.value.push(...res.data.result)
    fileUrl.value = res.data?.fileUrl
  })
  page++;
}
onMounted(() => {
  postScroll()
})
</script>

<style scoped>
.viewport {
  padding: 0 30rpx;
  height: 100vh;
  /* 确保scroll-view高度是固定的 */
}

/* 返回顶部 */
.back-to-top-icon {
  position: fixed;
  bottom: 50rpx;
  right: 20rpx;
  width: 70rpx;
  height: 70rpx;
}

/* 发布按钮 */
.send {
  position: fixed;
  bottom: 50rpx;
  left: calc(100vw - 50vw - 40rpx);
  width: 90rpx;
  height: 90rpx;
}
</style>
